
<template>
	<view class="page-smash-egg">
		<cl-topbar
			title="砸金蛋"
			:border="false"
			color="#ffffff"
			background-color="transparent"
		></cl-topbar>

		<!-- 背景图 -->
		<view class="bgc">
			<image src="@/static/images/bgc.png" mode="widthFix" />
		</view>

		<!-- 标题 -->

		<!-- 主要部分 -->
		<view class="main-title">奖池总金额{{totalAmount}}元</view>

		<!-- 剩余次数 -->
		<view class="remaining">剩余次数：{{ remainingNum }}次</view>

		<!-- 蛋区 -->
		<view class="main">
			<cl-row>
				<cl-col :span="8" v-for="(item, index) in list" :key="index">
					<view class="item" @tap.stop="smash(item)">
						<!-- 蛋 -->
						<image
							src="@/static/images/egg.png"
							mode="aspectFill"
							class="egg"
							v-if="item.eggVisibel == true"
						/>

						<!-- 砸蛋阶段1 -->
						<image
							src="@/static/images/step-1.png"
							mode="aspectFill"
							class="step1"
							v-if="item.step1Visibel == true"
						/>

						<!-- 砸蛋阶段2 -->
						<image
							src="@/static/images/step-2.png"
							mode="aspectFill"
							class="step2"
							v-if="item.step2Visibel == true"
						/>

						<!-- 砸蛋阶段3 -->
						<image
							src="@/static/images/step-3.png"
							mode="aspectFill"
							class="step3"
							v-if="item.step3Visibel == true"
						/>

						<!-- 未中奖 -->
						<image
							src="@/static/images/no-general.png"
							mode="aspectFill"
							class="no-general"
							v-if="item.winLotter == true"
						/>

						<!-- 锤子 -->
						<view class="hammer" v-if="item.hammerVisible == true">
							<image src="@/static/images/hammer.png" mode="aspectFill" />
						</view>
					</view>
				</cl-col>
			</cl-row>

			<!-- 提示 -->
			<cl-toast ref="toast"></cl-toast>
		</view>

		<!-- 奖品弹窗 -->
		<cl-popup :visible.sync="prizeVisible" direction="center" background-color="transparent">
			<view class="prize">
				<image src="@/static/images/prize.png" mode="aspectFill" class="prize-bgc" />

				<!-- 奖品内容 -->
				<view class="content">
					<!-- 奖品标题 -->
					<text class="prize-title">恭喜您获得</text>
					<!-- 提示 -->
					<text class="prize-tips">-金蛋奖金-</text>
					<!-- 奖金 -->
					<view class="prize-bonus">
						<text class="price">{{prizeAmount}}</text>
						<text class="unit">元</text>
					</view>
					<!-- 按钮 -->
					<view class="btn">
						<cl-button round @click="closePrize">开心收下</cl-button>
					</view>
				</view>
			</view>
			<!-- 关闭按钮 -->
			<view class="close" @tap="closePrize">
				<image src="@/static/images/close.png" mode="aspectFill" />
			</view>
		</cl-popup>
	</view>
</template>

<script>
var http = require("@/package-mall/utils/http.js");
var config = require("@/package-mall/utils/config.js");
const app = getApp();
export default {
	data() {
		return {
			userId: "",
			totalAmount: 0,//总金额
			remainingNum: 0, // 砸蛋次数
			prizeAmount: 0,//本次中奖金额
			eggNum: 9, // 蛋数量
			overList: [2,3,4],
			list: [], // 蛋列表
			prizeVisible: false, // 中奖弹窗
			process: false, // 砸蛋过程中
		};
	},
	onReady() {
		// 初始化list
		this.list = new Array(this.eggNum).fill().map((e) => {
			return (e = {
				hammerVisible: false, // 锤子显示
				eggVisibel: true, // 蛋显示
				step1Visibel: true, // 第一阶段显示
				step2Visibel: true, // 第二阶段显示
				step3Visibel: true, // 第三阶段显示
				winLotter: false, // 未中奖
				ifOver: false, // 是否已砸开
			});
		});
		this.init();
	},
	methods: {
		init(){
			this.userId = uni.getStorageSync('userid');
			var param = {
				url: "/lottery/drawPrizeNum/" + this.userId,
				method: "post",
				data: {},
				callBack: res => {
					console.log(res);
					this.totalAmount = res.totalAmount; // 总金额
					this.remainingNum = res.num; // 砸蛋次数
				}
			};
			http.request(param);
		},
		// 砸蛋
		smash(item) {
			if (item.ifOver == true) {
				// 已打开的蛋不能再次打开
				return false;
			}

			// 砸蛋的过程中，不能砸其他蛋
			if (this.process == true) {
				return false;
			}

			// 次数为0，不能砸蛋
			if (this.remainingNum < 1) {
				this.$refs["toast"].open({
					message: "次数用完了哦~",
				});
				return false;
			} else {
				this.remainingNum--;
			}

			// 生成中奖随机数，0- 中奖，1- 未中奖
			let ifWinLotter = Math.round(Math.random() * (2 - 1) + 1);

			// 锤子砸蛋动画
			item.hammerVisible = true;

			setTimeout(() => {
				// 锤子隐藏
				item.hammerVisible = false;

				// 隐藏蛋
				item.eggVisibel = false;
				setTimeout(() => {
					// 隐藏第一阶段
					item.step1Visibel = false;

					setTimeout(() => {
						// 隐藏第二阶段
						item.step2Visibel = false;
						setTimeout(() => {
							var param = {
								url: "/lottery/drawPrize/" + this.userId,
								method: "post",
								data: {},
								callBack: res => {
									console.log(res);
									// 隐藏第三阶段
									item.step3Visibel = false;
									if (res !== 0) {
										this.prizeVisible = true; // 中奖弹窗
										item.step3Visibel = true;
										item.winLotter = false;
										this.process = false;
										this.prizeAmount = res;
									} else {
										item.winLotter = true; // 未中奖笑脸
										this.process = false;
										this.$refs["toast"].open({
											message: "太可惜了，就差一点~",
										});
									}
									
								}
							};
							http.request(param);
						}, 100);
					}, 100);
				}, 100);
			}, 700);
			item.ifOver = true; // 蛋已打开
			this.process = true; // 开蛋过程中
		},

		// 关闭奖品弹窗
		closePrize() {
			this.prizeVisible = false;
		},
	},
};
</script>

<style lang="scss">
.page-smash-egg {
	position: relative;
	.bgc {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		image {
			display: block;
			width: 100%;
		}
	}
	.title {
		width: 100%;
		padding-top: 46rpx;
		text-align: center;
		font-size: 44rpx;
		font-weight: 500;
		color: #ffffff;
	}
	.main-title {
		position: absolute;
		top: 718rpx;
		width: 100%;
		text-align: center;
		font-size: 33rpx;
		font-weight: 500;
		color: #fe3c3f;
	}
	.remaining {
		position: absolute;
		top: 794rpx;
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffdf6e;
	}
	.main {
		position: absolute;
		top: 840rpx;
		width: calc(100% - 108rpx);
		height: 730rpx;
		margin: 0 54rpx;
		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 100%;
			height: 232rpx;
			image {
				width: 211rpx;
				height: 232rpx;
			}
			.egg {
				position: absolute;
				z-index: 99;
			}
			.step1 {
				position: absolute;
				z-index: 88;
			}
			.step2 {
				position: absolute;
				z-index: 77;
			}
			.step3 {
				position: absolute;
				z-index: 66;
			}
			.no-general {
				position: absolute;
			}
			.hammer {
				position: absolute;
				top: 0;
				right: -22rpx;
				width: 130rpx;
				height: 144rpx;
				z-index: 99;
				animation: smash 0.2s infinite;
				animation-direction: alternate;
				@keyframes smash {
					from {
						transform: rotate(0deg);
					}
					to {
						transform: rotate(-30deg);
					}
				}
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.cl-popup {
		.prize {
			position: relative;
			width: 621rpx;
			height: 769rpx;
			margin-bottom: 40rpx;
			&-bgc {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.content {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				.prize-title {
					margin-bottom: 20rpx;
					font-size: 56rpx;
					font-weight: 500;
					color: #ffffff;
				}
				.prize-tips {
					margin-bottom: 30rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #feffb3;
				}
				.prize-bonus {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					font-size: 83rpx;
					font-weight: bold;
					color: #feffb3;
					font-size: 83rpx;
					font-weight: bold;
					color: #feffb3;
				}
				.btn {
					margin-bottom: 40rpx;
					/deep/.cl-button {
						background: linear-gradient(0deg, #ffbe4e 0%, #ffe485 100%);
						::after {
							border: 0;
						}
						&__text {
							font-size: 28rpx;
							font-weight: 500;
							font-style: italic;
							color: #f41018;
						}
					}
				}
			}
		}
		.close {
			width: 100%;
			text-align: center;
			image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}
}
</style>
